<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" />
    <meta name="author" content="火星科技 http://mars2d.cn " />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="x5-fullscreen" content="true" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <link rel="shortcut icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/muyao1987/cdn/marsgis.cn/favicon/favicon.ico" />

    <meta name="keywords" content="火星科技,leaflet,mars2d,GIS,marsgis,二维,地图,地球,开发,框架,系统,示例,资料,模型,离线,外包,合肥,安徽,中国" />
    <meta
      name="description"
      content="火星科技 合肥火星 合肥火星科技 合肥火星科技有限公司 leaflet leaflet框架 leaflet开发 leaflet leaflet开发 leaflet框架 二维 地图 模型  gis marsgis 地图离线 地图开发 地图框架 地图外包 框架 开发 外包  地图离线 二维地图 二维地图 全景漫游 地理信息系统 云GIS 二维GIS GIS平台 WebGIS"
    />

    <title>Mars2D地图 |二维地图| 火星科技|合肥火星科技|合肥火星科技有限公</title>

    <script
      type="text/javascript"
      src="../lib/include-lib.js"
      libpath="../lib/"
      include="jquery,font-awesome,bootstrap,layer,haoutil,mars2d"
    ></script>
    <link href="css/style.css" rel="stylesheet" />

    <style>
      .myclusterLayer {
        width: 40px;
        height: 40px;
        background-color: greenyellow;
        text-align: center;
        font-size: 24px;
      }

      .mars2d-marker-photo {
        border: 2px solid #fff;
        box-shadow: 3px 3px 10px #888;
      }

      .mars2d-marker-photo div {
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
      }

      .mars2d-marker-photo b {
        position: absolute;
        top: -6px;
        right: -11px;
        color: #555;
        background-color: #fff;
        border-radius: 8px;
        height: 15px;
        min-width: 15px;
        line-height: 15px;
        text-align: center;
        padding: 1px;
        box-shadow: 0 3px 14px rgb(0 0 0 / 40%);
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <div id="mars2dContainer" class="mars2d-container"></div>

    <div class="infoview">
      <input id="btnAddData" type="button" class="btn btn-danger" value="默认样式" />
      <input id="btnAddData2" type="button" class="btn btn-primary" value="自定义样式" />
      <input id="btnAddData3" type="button" class="btn btn-primary" value="照片点" />
      <input id="btnClear" type="button" class="btn btn-primary" value="清除" />
    </div>

    <script src="./js/common.js"></script>
    <script type="text/javascript">
      "use script"; //开发环境建议开启严格模式

      var map;
      var clusterLayer;

      function initMap(options) {
        //合并属性参数，可覆盖config.json中的对应配置
        let mapOptions = mars2d.Util.merge(options, {});

        //创建地图
        map = new mars2d.Map("mars2dContainer", mapOptions);

        //新增绘制
        $("#btnAddData").click(function () {
          addLayer();
        });
        $("#btnAddData2").click(function () {
          addCustomLayer();
        });
        $("#btnAddData3").click(function () {
          addCustomPhotoLayer();
        });
        $("#btnClear").click(function () {
          removeLayer();
        });

        addLayer();
      }

      function removeLayer() {
        if (clusterLayer) {
          clusterLayer.remove();
          clusterLayer = null;
        }
      }

      function addLayer() {
        removeLayer();

        clusterLayer = new mars2d.layer.ClusterLayer({
          chunkedLoading: true, //间隔添加数据，以便页面不冻结。
          showCoverageOnHover: false, //是否显示聚合标记的边界。
          disableClusteringAtZoom: 18, //此级别下不聚合
        });
        map.addLayer(clusterLayer);

        //添加随机数据演示
        for (var i = 0; i < 100; i++) {
          var graphic = new mars2d.graphic.Marker({
            latlng: getRandomLatLng(),
            style: {
              image: "img/marker/mark1.png",
              width: 32,
              height: 44,
            },
            attr: {
              id: i,
            },
          });
          clusterLayer.addGraphic(graphic);

          var inhtml = `<div class="mars-popup-titile">第${i}个</div>
           <div class="mars-popup-content" >
              <div><label>编码</label> 测试数据 </div>
              <div><label>名称</label> 测试名称 </div>
              <div><label>地址</label> 测试地址 </div>
            </div>`;
          graphic.bindPopup(inhtml);
        }
      }

      function addCustomLayer() {
        removeLayer();

        clusterLayer = new mars2d.layer.ClusterLayer({
          maxClusterRadius: 120,
          spiderfyOnMaxZoom: false,
          showCoverageOnHover: false,
          zoomToBoundsOnClick: true,
          iconCreateFunction: function (cluster) {
            var markers = cluster.getAllChildMarkers();
            //显示个数
            var n = markers.length;
            //显示数据的数量
            // var n = 0;
            // for (var i = 0; i < markers.length; i++) {
            //   n += markers[i].attr.id;
            // }
            return L.divIcon({ html: n, className: "myclusterLayer", iconSize: L.point(40, 40) });
          },
        });
        map.addLayer(clusterLayer);

        //添加随机数据演示
        for (var i = 0; i < 100; i++) {
          var graphic = new mars2d.graphic.Marker({
            latlng: getRandomLatLng(),
            style: {
              image: "img/marker/mark1.png",
              width: 32,
              height: 44,
            },
            attr: { id: i },
          });
          clusterLayer.addGraphic(graphic);

          var inhtml = `<div class="mars-popup-titile">第${i}个</div>
           <div class="mars-popup-content" >
              <div><label>编码</label> 测试数据 </div>
              <div><label>名称</label> 测试名称 </div>
              <div><label>地址</label> 测试地址 </div>
            </div>`;
          graphic.bindPopup(inhtml);
        }
      }

      //照片点示例
      function addCustomPhotoLayer() {
        removeLayer();

        clusterLayer = new mars2d.layer.ClusterLayer({
          maxClusterRadius: 100,
          spiderfyOnMaxZoom: false,
          showCoverageOnHover: false,
          zoomToBoundsOnClick: true,
          iconCreateFunction: function (cluster) {
            var markers = cluster.getAllChildMarkers();
            return L.divIcon({
              className: "mars2d-marker-photo",
              html: '<div style="background-image: url(' + markers[0].attr.image + ');"></div>​<b>' + markers.length + "</b>",
              iconSize: L.point(40, 40),
            });
          },
        });
        map.addLayer(clusterLayer);

        //添加随机数据演示
        for (var i = 0; i < 100; i++) {
          let image = "img/photo/test.jpg";
          var graphic = new mars2d.graphic.DivGraphic({
            latlng: getRandomLatLng(),
            style: {
              html: `<div style="background-image: url(${image});"></div>`,
              className: "mars2d-marker-photo",
              iconSize: [40, 40],
            },
            attr: { image: image, id: i },
          });
          clusterLayer.addGraphic(graphic);

          var inhtml = `<div style="width:250px;text-align: center;"><h4>木遥</h4><br/><img src="${image}" /></div>`;
          graphic.bindPopup(inhtml);
        }
      }

      function getRandomLatLng() {
        var bounds = map.getBounds(),
          southWest = bounds.getSouthWest(),
          northEast = bounds.getNorthEast(),
          lngSpan = northEast.lng - southWest.lng,
          latSpan = northEast.lat - southWest.lat;

        return L.latLng(southWest.lat + latSpan * Math.random(), southWest.lng + lngSpan * Math.random());
      }
    </script>
  </body>
</html>
